<template>
  <div>
    <h5 class="text-muted">当前任务：项目认领</h5>
    <el-form class="query-table-form" @submit.native.prevent :inline="true" :model="params">
      <el-form-item>
        <select-address
          v-model="params.address_code"
          :auto-top="true"
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.customer_name"
          placeholder="企业名称查询"
          :clearable="true"
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.corp_name"
          placeholder="经营者名称查询"
          :clearable="true"
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <claim-bank v-model="params.bank_id" @change="getData()"></claim-bank>
        <!--<el-input v-model="params.bank_name"-->
        <!--placeholder="银行名称查询"-->
        <!--:clearable="true"-->
        <!--@change="getData"></el-input>-->
      </el-form-item>
      <el-form-item>
        <el-checkbox
          v-model="params.has_ele_fee"
          border
          :true-label="1"
          false-label=""
          @change="getData()"
        >
          电表
        </el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()" type="primary">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border class="table-sm" v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:address="scope">
        <div class="text-truncate" :title="scope.row.address">{{ scope.row.address }}</div>
      </template>

      <template v-slot:claim="scope">
        <span v-if="+scope.row.claim_status === 0" class="text-danger">未认领</span>
        <el-popover placement="top-start" v-else title="银行项目经理" width="200" trigger="hover">
          <div>
            <div>{{ `姓名： ${scope.row.bank_approved_person || '-'};` }}</div>
            <div>{{ `电话： ${scope.row.bank_approved_person_mobile || '-'}` }}</div>
          </div>
          <div slot="reference">
            <div class="text-left text-success">
              {{ scope.row.bank_name }}
            </div>
          </div>
        </el-popover>
      </template>

      <!-- <template v-slot:bank="scope">
        <span v-if="+scope.row.is_approval === 2">-</span>
        <div class="text-truncate"
             v-else
             :title="scope.row.public_bank_names && scope.row.public_bank_names.replace(/\|/g, '、')">
          {{ (scope.row.public_bank_names && scope.row.public_bank_names.replace(/\|/g, '、')) || '-'}}
        </div>
      </template> -->
    </c-table>

    <div class="query-pagination">
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <el-dialog
      :visible.sync="reportVisible"
      :close-on-click-modal="false"
      append-to-body
      top="30px"
      width="80%"
    >
      <el-tabs>
        <el-tab-pane label="数字档案">
          <credit-file :view-mode="true" :query-id="queryId"></credit-file>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script>
import CreditFile from '@/credit/components/creditFile/Index'
import { mapGetters } from 'vuex'
import { enumOrgClass, enumFarmType, enumMainType } from '@/credit/plugins/enum'
import { enumClaimStatus } from '@/bank/plugins/enum'
import SelectAddress from '@/components/select/SelectAddress'
import ClaimBank from '@/credit/views/county/mission/ClaimBank'
export default {
  components: {
    CreditFile,
    ClaimBank,
    SelectAddress,
  },
  props: {},
  data() {
    return {
      params: {
        index: 1,
        size: 10,
        lender_idcard: '',
        customer_name: '',
        corp_name: '',
        'recommend_status.eq': 1,
        'submit_type.in': '1,2',
      },
      loading: false,
      enumClaimStatus,
      tableName: 'customer_related_view',
      tableData: [],
      totalCount: 0,
      tableColumns: [
        {
          attrs: { label: '主体名称', prop: 'customer_name', minWidth: '110px' },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '地址', prop: 'address' }, slot: 'address' },
        {
          attrs: { label: '组织形式', prop: 'org_class', align: 'center' },
          process: v => enumOrgClass[v] || '-',
        },
        {
          attrs: { label: '企业类型', prop: 'farm_type', align: 'center' },
          process: v => enumFarmType[v] || '-',
        },
        { attrs: { label: '经营者姓名', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center' } },
        { attrs: { label: '申请金额(万元)', prop: 'apply_funds', align: 'center' } },
        { attrs: { label: '银行预审金额(万元)', prop: 'bank_approved_funds', align: 'center' } },
        {
          attrs: { label: '是否联保', prop: 'gua_type', align: 'center' },
          process: v => enumMainType[v],
        },
        { attrs: { label: '客户来源', prop: 'submit_person_name', align: 'center' } },
        {
          attrs: { label: '银行受理时间', prop: 'claim_time', align: 'center' },
          process: v => this.$utils.dateFormat(v, 'yyyy-MM-dd'),
        },
        { attrs: { label: '贷款年限', prop: 'load_years', align: 'center' } },
        { attrs: { label: '受理银行', prop: 'bank_name', align: 'center' }, slot: 'claim' },
        {
          attrs: { label: '操作', align: 'center' },
          operations: [
            { content: '数字信用档案', icon: 'fa fa-file-text', event: this.handleView },
          ],
        },
      ],
      // 信用档案
      queryId: '',
      reportVisible: false,
    }
  },
  computed: {
    ...mapGetters(['user', 'userId', 'clientId', 'job']),
    isManager() {
      return ['org_credit_super', 'org_c_manage', 'org_r_emp', 'org_r_manage', 'org_corp'].includes(
        this.job
      )
    },
    isUserTown() {
      return this.user.orgRegionLever === 3
    },
  },
  watch: {
    $route(route) {
      if (route.name === 'missionClaim') {
        this.getData()
      }
    },
  },
  created() {
    if (this.isUserTown) {
      this.params['service_id.eq'] = this.clientId
    } else {
      this.params['recommend_service.eq'] = this.clientId
      this.params['gua_type.eq'] = 1
    }
    this.getData()
  },
  mounted() {},
  methods: {
    async getData(index = 1) {
      this.params.index = index
      const params = { ...this.params }
      const status = this.$route.query.status
      if (status !== undefined) {
        params['claim_status.eq'] = status
      }
      if (!this.isManager) {
        params['orWhere.pre_approval_person.eq'] = this.userId
        params['orWhere.res_a.eq'] = this.userId
        params['orWhere.res_b.eq'] = this.userId
      }

      this.loading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, params, {
          N1approved_date: 'desc',
          N2create_time: 'desc',
        })
      )
      this.loading = false

      const data = (res && res.data) || {}
      this.totalCount = data.totalCount
      this.tableData = data.data
    },
    handleView(row) {
      this.queryId = row.customer_related_id
      this.reportVisible = true
    },
  },
}
</script>
<style lang="scss" scoped></style>
